<template>
	<view class="page-wrap">
		<match-media :min-width="MAX_SIZEiZE">
			<navBar></navBar>
		</match-media>
		<match-media :max-width="MAX_SIZEiZE - 1">
			<cu-custom :title="$t('Page.mineWallet.czjl')"> </cu-custom>
		</match-media>
		<view class="content">
			<pc-nav-bar :pageName="$t('Page.mineWallet.czjl')"> </pc-nav-bar>
			<scroll-view refresher-default-style="white" refresher-background="transparent" refresher-enabled
				scroll-with-animation :refresher-triggered="triggered" @refresherrefresh="refresherrefresh"
				:scroll-top="scrollTop" @scroll="onScroll" scroll-y="true" :style="{height:scrollHeight}"
				class="scroll-Y" @scrolltolower="lower">
				<view class="list-wrap" v-if="list.length > 0">
					<view class="item" v-for="(item,index) in list" :key="item.id" @click="toDetail(item)">
						<view class="status-text" :class="[item.status == 1 ? 'success' : 'fail']">
							{{item.status == 1 ? $t('Page.mineWallet.czcg') : $t('Page.mineWallet.czsb') }}
						</view>
						<view class="orderNo"> {{$t('Page.mineWallet.ddh')}}. {{item.sn}}</view>
						<view class="cont-bottom" v-if="item.createtime">
							<text class="order-price">R$ {{item.price}}</text>
							<text class="createtime">{{$tools.timeFormat(item.createtime, 'dd/mm/yyyy hh:MM')}}</text>
						</view>
					</view>
				</view>
				<uni-load-more :status="status" :contentText="contentText"></uni-load-more>
			</scroll-view>
		</view>
		<backToTop :isShow="isShow" @scrollToTop="scrollToTop"></backToTop>
	</view>
</template>

<script>
	import pcNavBar from '@/components/pcNavBar/pcNavBar.vue'
	import cuCustom from '@/components/cu-custom/cuCustom.vue'
	import {
		mapState
	} from 'vuex'
	import {
		Debounce
	} from '@/utils/common.js'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import {
		sendMessage
	} from '@/api/websocket.js'
	export default {
		components: {
			pcNavBar,
			cuCustom
		},
		data() {
			return {
				MAX_SIZEiZE,
				searchParams: {
					page: 1,
					page_ini: 10
				},
				list: [],
				totalCount: 0,
				status: 'loading', //  more/loading/noMore
				contentText: {
					contentdown: this.$t('Page.loadmore.xl'),
					contentrefresh: this.$t('Page.loadmore.jzz'),
					contentnomore: this.$t('Page.loadmore.mygdl')
				},
				scrollTop: 0,
				isShow: false, // 控制是否显示返回顶部按钮
				triggered: false,
				triggerHeight: Math.ceil(uni.getSystemInfoSync().windowHeight / 2.5)
			}
		},

		computed: {
			...mapState({
				theme: state => state.app.theme,
				windowSize: state => state.app.windowSize
			}),
			scrollHeight() {
				const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
				if (this.windowSize.windowWidth <= 768) {
					return `calc(100vh - 44px - 15px - ${statusBarHeight}px)`
				} else {
					return 'calc(100vh - 70px - 70px - 30px)'
				}
			},
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			scrollToTop(e) {
				this.scrollTop = 0
				this.isShow = e
			},
			refresherrefresh(e) {
				this.triggered = true
				setTimeout(() => {
					this.list = [];
					this.searchParams.page = 1;
					this.getlist();
				}, 500)
			},

			onScroll: Debounce(function(e) {
				this.scrollTop = e.detail.scrollTop
				if (e.detail.scrollTop >= this.triggerHeight) {
					this.isShow = true
				} else {
					this.isShow = false
				}
			}, 500),

			toDetail(item) {
				item = {
					...item,
					isRechargeRecord: true
				}
				console.log(item)
				uni.navigateTo({
					url: `/pages/Mine/wallet/components/rechargeResult?item=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			lower(e) {
				if (this.list.length < this.totalCount) {
					this.status = 'loading'
					this.searchParams.page++
					this.getlist()
				}
			},
			getlist() {
				const {
					MYCHARGE
				} = this.$api
				sendMessage({
					flag: MYCHARGE,
					content: this.searchParams
				})
				uni.$once(MYCHARGE, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.triggered = false
						if (this.searchParams.page === 1) {
							this.list = data.list
							this.totalCount = data.count
						} else {
							this.list = [...this.list, ...data.list]
						}
					}

					if (this.list.length < this.totalCount) {
						setTimeout(() => {
							this.status = 'more'
						}, 1000)
					} else {
						this.status = 'noMore'
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap {
		min-height: 100vh;
		background: var(--bg-3);

		.content {
			width: 100%;
			height: calc(100vh - 44px - var(--status-bar-height));
			overflow-y: scroll;
			padding: 0 15px;
			box-sizing: border-box;

			.scroll-Y {
				width: 100%;
				padding-top: 15px;

				/* 隐藏竖向滚动条 */
				::-webkit-scrollbar {
					display: none;
				}

				.list-wrap {

					.item {
						background: var(--bg-9);
						margin-bottom: 20rpx;
						font-weight: 500;
						padding: 12px 15px;
						border-radius: 15px;
						cursor: pointer;
						box-sizing: border-box;

						.status-text {
							font-size: 30rpx;
							line-height: 35rpx;
							margin-bottom: 12rpx;

						}

						.success {
							color: var(--color-39);
						}

						.fail {
							color: var(--color-40);
						}

						.orderNo {
							font-size: 26rpx;
							color: var(--color-35);
							margin-bottom: 6rpx;
						}

						.cont-bottom {
							display: flex;
							justify-content: space-between;
							line-height: 25px;

							.order-price {
								font-size: 18px;
								font-weight: bold;
								color: #FFFFFF;
							}

							.createtime {
								font-size: 12px;
								color: var(--color-36);
							}
						}
					}
				}
			}
		}
	}

	@media screen and (min-width: 768px) {
		.page-wrap {
			padding-top: 70px;

			.content {
				width: 100%;
				height: calc(100vh - 70px) !important;
				overflow-y: auto;
				padding: 10px 30px 0;
				box-sizing: border-box;

				.scroll-Y {
					width: 100%;
					margin-top: 30px;
					box-sizing: border-box;
					padding-top: 0;

					.list-wrap {
						width: 100%;
						box-sizing: border-box;
					}
				}
			}
		}
	}
</style>